<!-- 债转项目列表  -->
<template>
	<el-row class="warp">
		<el-col :span="24" class="warp-breadcrum">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
				<el-breadcrumb-item>用户列表</el-breadcrumb-item>
			</el-breadcrumb>
		</el-col>

		<el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
			<!--工具条-->
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
				<el-form :inline="true" :model="filters">
					<el-form-item>
						<el-input v-model="filters.name" placeholder="用户名/姓名/昵称" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
					</el-form-item>
					<el-form-item>
						<el-input v-model="filters.name" placeholder="用户名/姓名/昵称" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
					</el-form-item>
					<el-form-item>
						<el-input v-model="filters.name" placeholder="用户名/姓名/昵称" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleSearch">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>

			<!--列表-->
			<el-table :data="users" highlight-current-row v-loading="loading" style="width: 100%;">
				<el-table-column type="index" width="60"></el-table-column>
				<el-table-column prop="name" label="姓名" width="120" sortable></el-table-column>
				<el-table-column prop="nickname" label="昵称" width="120" sortable></el-table-column>
				<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable></el-table-column>
				<el-table-column prop="email" label="邮箱" min-width="160" sortable></el-table-column>
				<el-table-column prop="addr" label="地址" sortable></el-table-column>
			</el-table>

		</el-col>
	</el-row>
</template>

<script>
  import API from '../../api/api_user';

  export default {
    data() {
		return {
			filters: {
				name: ''
			},
			loading: false,
			users: [],
			total: 0,
			page: 1,
			limit: 10,
			loading: false
		}
	},
    methods: {
		//性别显示转换
		formatSex: function (row, column) {
			return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
		},
		handleCurrentChange(val) {
			this.page = val;
			this.search();
		},
		handleSearch(){
			this.total = 0;
			this.page = 1;
			this.search();
		},
		//获取用户列表
		search: function () {
			let that = this;
			let params = {
				page: that.page,
				limit: 10,
				name: that.filters.name
			};

			that.loading = true;
			API.findZzProjct(params).then(function (result) {
				that.loading = false;
				if (result && result.users) {
					that.total = result.total;
					that.users = result.users;
				}
			}, function (err) {
				that.loading = false;
				that.$message.error({showClose: true, message: err.toString(), duration: 2000});
			}).catch(function (error) {
				that.loading = false;
				console.log(error);
				that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
			});
		}
    },
    mounted() {
		this.handleSearch()
    }
  }
</script>

<style scoped>

</style>
